<template>
  <uni-nav-bar title="我的下线" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">
    <view class="space-between">
      <view>用户</view>
      <view>贡献值</view>
    </view>
    <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
      :style="{ height: pageHeight + 'px' }">
      <view class="space-between list" v-for="item in orderLists">
        <view class="center">
          <image :src="item.avatar" mode="" style="width: 76rpx;height: 76rpx;border-radius: 50%;margin-right: 15rpx;">
          </image>
          <view class="direction-start">
            <view>{{item.nickname}}</view>
            <view style="margin-top:5rpx;">{{item.mobile.substr(0,3)+'****'+item.mobile.substr(-4)}}</view>
          </view>
        </view>
        <view style="color:#FF704E;">{{item.profit}}</view>
      </view>
      <view v-if="orderLists.length<1" class="column" :style="{ height: pageHeight + 'px' }">
        <image :src="Empty" style="width:352rpx;height: 352rpx;"></image>
        <text style="margin-top:20rpx;color:#666;">暂无好友</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { getTeam } from '@/gql/invitation';
  import { toPublish } from '@mqtt';
  import { getDriverID } from '@/stores/driverID';
  import { showLoading } from '@/utils/prompt';
  import { ref } from 'vue';
  import { Empty } from '@/utils/Static';
  const driver_id = getDriverID();
  /**
   * 我的下线
   * @property {String} pageHeight 滑动高度
   * @property {Array} orderLists 好友列表
   * @property {Number} lastPage 总页数
   * @property {Number} currentPage 当前页数
   */
  const orderLists = ref([]);
  const lastPage = ref(1);
  const currentPage = ref(1);

  const pageHeight = ref('')
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 105).toString();
    },
  });
  init()
  /**
   * 我的下线
   * @property {Number} driver_id 用户ID
   * @property {Number} page 页数
   */
  function init() {
    showLoading()
    const payload = {
      query: getTeam,
      variables: {
        page: currentPage.value,
        driver_id,
      },
    };
    toPublish(
      'ql/driver/getTeam',
      payload,
      (obj : any) => {
        const { getTeam } = obj.data;
        orderLists.value = [...orderLists.value, ...getTeam.list];
        lastPage.value = getTeam.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
</script>

<style scoped lang="less">
  .list:nth-last-of-type(1) {
    border-bottom: 0px;
    padding-bottom: 0px;
  }

  .list {
    padding: 20rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }
</style>